<template>
  <div class="p-3">
    <a-card title="cookie配置">
      <a-form :model="formState" @finish="submitCookie">
        <a-form-item
          label="cookie"
          name="cookie"
          :rules="[{ required: true, message: '请输入cookie' }]"
        >
          <a-textarea
            v-model:value="formState.cookie"
            placeholder="请输入cookie"
            :rows="4"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">保存</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-row :gutter="[24, 4]">
      <a-col :span="12">
        <a-card title="视频搜索维度">
          <a-form :model="searchForm" @finish="submitSearch">
            <a-form-item
              label="视频总量"
              name="video_count"
              :rules="[{ required: true, message: '请输入视频总量' }]"
            >
              <a-input-number
                id="inputNumber"
                v-model:value="searchForm.video_count"
                step="5"
                :min="10"
              />
            </a-form-item>
            <a-form-item
              label="关键词"
              name="keyword"
              :rules="[{ required: true, message: '请输入关键词' }]"
            >
              <a-input
                v-model:value="searchForm.keyword"
                placeholder="请输入关键词"
              />
            </a-form-item>
            <a-form-item
              label="排列依据"
              name="sort_type"
              :rules="[{ required: true, message: '请选择排列依据' }]"
            >
              <a-radio-group v-model:value="searchForm.sort_type">
                <a-radio value="0">综合</a-radio>
                <a-radio value="2">最新</a-radio>
                <a-radio value="1">最多点赞</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              label="发布时间"
              name="publish_time"
              :rules="[{ required: true, message: '请输入时间' }]"
            >
              <a-radio-group v-model:value="searchForm.publish_time">
                <a-radio value="0">不限</a-radio>
                <a-radio value="1">一天内</a-radio>
                <a-radio value="7">一周内</a-radio>
                <a-radio value="180">半年内</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              label="视频时常"
              name="filter_during"
              :rules="[{ required: true, message: '请输入时常' }]"
            >
              <a-radio-group v-model:value="searchForm.filter_during">
                <a-radio value="0">不限</a-radio>
                <a-radio value="0-1">1分钟以下</a-radio>
                <a-radio value="1-5">1-5分钟</a-radio>
                <a-radio value="5-10000">5分钟以上</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              label="范围"
              name="search_range"
              :rules="[{ required: true, message: '请输入范围' }]"
            >
              <a-radio-group v-model:value="searchForm.search_range">
                <a-radio value="0">不限</a-radio>
                <a-radio value="3">关注的人</a-radio>
                <a-radio value="1">最近看过</a-radio>
                <a-radio value="2">还未看过</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              label="内容形式"
              name="content_type"
              :rules="[{ required: true, message: '请输入内容形式' }]"
            >
              <a-radio-group v-model:value="searchForm.content_type">
                <a-radio value="0">不限</a-radio>
                <a-radio value="1">视频</a-radio>
                <a-radio value="2">图文</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit">保存</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="评论区采集规则">
          <a-form :model="ruleForm" @finish="submitRule">
            <a-form-item
              label="关键词组"
              name="keywords"
              :rules="[{ required: true, message: '请输入' }]"
            >
              <a-select
                v-model:value="ruleForm.keywords"
                mode="tags"
                style="width: 100%"
                :token-separators="[',']"
                placeholder="关键词组"
              ></a-select>
            </a-form-item>
            <a-form-item
              label="评论点赞数(大于等于)"
              name="digged"
              :rules="[{ required: true, message: '评论点赞数' }]"
            >
              <a-input-number
                id="inputNumber"
                v-model:value="ruleForm.digged"
                :min="1"
                :max="10"
              />
            </a-form-item>
            <a-form-item
              label="评论来源方式"
              name="enter_from"
              :rules="[{ required: true, message: '请输入评论来源' }]"
            >
              <a-checkbox-group
                v-model:value="ruleForm.enter_from"
                name="enter_from"
                :options="enterOptions"
              />
            </a-form-item>
            <a-form-item
              label="评论人ip地区"
              name="ip_label"
              :rules="[{ required: true, message: '请输入ip' }]"
            >
              <a-form-item-rest>
                <a-switch
                  v-model:checked="allSelect"
                  checked-children="全选"
                  @change="changeSwitch"
                  un-checked-children="反选"
                />
              </a-form-item-rest>
              <a-select
                v-model:value="ruleForm.ip_label"
                mode="multiple"
                placeholder="地区"
                style="width: 100%"
                :options="provinces.map((item) => ({ value: item }))"
              ></a-select>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit">保存</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { http } from "@/plugins/axios";
import cookie from "./cookie";
import provinces from "./area";
// cookie部分
interface FormState {
  cookie: string;
}

const formState = ref<FormState>({
  cookie: cookie.cookie,
});
const submitCookie = async () => {
  await http.request({
    method: "post",
    url: `/cookie`,
    data: formState.value,
  });
};

const searchForm = ref({
  keyword: "",
  sort_type: "",
  publish_time: "",
  filter_duration: "",
  search_range: "",
  content_type: "",
  video_count: 100,
});

const submitSearch = async () => {
  await http.request({
    method: "post",
    url: `/searchfilter`,
    data: searchForm.value,
  });
};

const ruleForm = ref({
  keywords: [],
  digged: 0,
  enter_from: [
    "''",
    "chat",
    "general_search",
    "homepage_follow",
    "homepage_hot",
    "homepage_square",
    "homepage_video_hotsoon",
    "message",
    "others_homepage",
    "personal_homepage",
    "search_result",
    "single_follow_feed",
  ],
  ip_label: [],
});
const enterOptions = [
  { label: "默认选项", value: "''" },
  { label: "聊天", value: "chat" },
  { label: "通用搜索", value: "general_search" },
  { label: "首页关注", value: "homepage_follow" },
  { label: "首页热门", value: "homepage_hot" },
  { label: "首页广场", value: "homepage_square" },
  { label: "首页视频即将热门页", value: "homepage_video_hotsoon" },
  { label: "推送消息", value: "message" },
  { label: "他人首页", value: "others_homepage" },
  { label: "个人首页", value: "personal_homepage" },
  { label: "搜索结果", value: "search_result" },
  { label: "单一关注信息流", value: "single_follow_feed" },
];
const filteredOptions = computed(() =>
  provinces.filter((o) => !ruleForm.value.ip_label.includes(o))
);
const allSelect = ref(false);
// 全选
const changeSwitch = (e) => {
  if (e == true) {
    ruleForm.value.ip_label = provinces;
  } else {
    ruleForm.value.ip_label = [];
  }
};
const submitRule = async () => {
  await http.request({
    method: "post",
    url: `/commentfilter`,
    data: ruleForm.value,
  });
};
</script>

<style lang="scss" scoped></style>
